<script lang="ts" setup>
import type { ColumnsType } from 'ant-design-vue/es/table/Table'


const props = withDefaults(defineProps<{
  keyName: string
  keyTitle: string
  valueName: string
  valueTitle: string
  extraName?: string
  extraTitle?: string
  disabled: boolean
  showPagination: {
    type: Boolean,
    default: true,
  }
}>(),{}
)

const { keyName, keyTitle, valueName, valueTitle, extraName, extraTitle } = toRefs(props)

const dataSource = defineModel<object[]>('dataSource', {
  required: true,
})

const coloums = reactive<ColumnsType<any>>([
  {
    align: 'center',
    key: keyName.value,
    title: keyTitle.value,
    dataIndex: keyName.value,
  },
  {
    align: 'center',
    key: valueName.value,
    title: valueTitle.value,
    dataIndex: valueName.value,
    ellipsis: true,
  },
])

if (extraName.value && extraTitle.value) {
  coloums.push({
    align: 'center',
    key: extraName.value,
    title: extraTitle.value,
    dataIndex: extraName.value,
    ellipsis: true,
  })
}

if (!props.disabled) {
  coloums.push({
    align: 'center',
    key: 'operator',
    dataIndex: 'operator',
    title: '操作',
  })
}

function handleAddData() {
  if (extraName.value && extraTitle.value) {
    dataSource.value.push({
      [keyName.value]: '',
      [valueName.value]: '',
      [extraName.value]: '',
    })
  } else {
    dataSource.value.push({
      [keyName.value]: '',
      [valueName.value]: '',
    })
  }

}
</script>

<template>
  <EditableTable v-model:data-source-proxy="dataSource" :columns="coloums" @add-data="handleAddData"
    :disabled="disabled" :showPagination="showPagination" />
</template>
